<template>
  <div class="div">
    <PageTitle title="商品列表" addUrl="/goodsList/goodsDetail/none"></PageTitle>
    <el-row>
      <el-col :span="18">
        <dl class="select-bar">
          <dt>筛选:</dt>
          <dd :class="{ current: status == '' }" @click="handleClick('')">全部</dd>
          <dd :class="{ current: status == '0' }" @click="handleClick('0')">上架</dd>
          <dd :class="{ current: status == '1' }" @click="handleClick('1')">下架</dd>
        </dl>
      </el-col>
      <!-- <el-col :span="6">
        <el-input :placeholder="'输入商品名称搜索'" v-model="search" @keypress.enter.native="handleSearch">
            <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
        </el-input>
      </el-col> -->
    </el-row>
    <el-table
      stripe
      :data="tableData"
    >
      <el-table-column
        prop="goods_name"
        label="款式名称">
      </el-table-column>
      <!-- <el-table-column
        prop="price"
        label="商品价格(元)">
      </el-table-column> -->
      <!-- <el-table-column
        label="款式图片(视频)"
      >
        <template slot-scope="scope" v-if="scope.row.url">
          <img v-if="!scope.row.url.endsWith('mp4')" :src="scope.row.url" @click="handlePictureCardPreview(scope.row.url)" class="list-img">
          <a v-else :href="scope.row.url" target="_blank">
            <video :src="scope.row.url"></video>
          </a>
        </template>
      </el-table-column> -->
      <!-- <el-table-column
        prop="company"
        label="所属公司">
      </el-table-column> -->
      <el-table-column
        prop="fication_name"
        label="所属品牌">
      </el-table-column>
      <!-- <el-table-column
        prop="describe"
        label="商品描述">
      </el-table-column> -->
      <el-table-column
        label="商品库存">
          <template slot-scope="scope">
            {{ scope.row.stock }}个
          </template>
      </el-table-column>
      <el-table-column
        label="状态"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.state === '0'" class="color-success">上架</span>
          <span v-else class="color-danger">下架</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="140">
      <template slot-scope="scope">
       <el-button v-if="scope.row.state === '0'" @click="changeState(scope.row.id, 1)" type="text">下架</el-button>
       <el-button v-else @click="changeState(scope.row.id, 0)" type="text">上架</el-button>
        <router-link
          :to="'/goodsList/goodsDetail/' + scope.row.id"
          class="color-theme margin-right"
        >查看</router-link>
        <!-- <el-button v-if="scope.row.state === '0'" @click="changeState(scope.row.id, 1)" type="text">下架</el-button> -->
        <!-- <el-button v-else @click="changeState(scope.row.id, 0)" type="text">上架</el-button> -->
        <el-button type="text" @click="del(scope.row.id)">删除</el-button>
      </template>
      </el-table-column>
    </el-table>
    <div class='pagination-wrapper'>
      <el-pagination
        layout="prev, pager, next"
        @current-change="pageChange"
        :page-size="pageSize"
        :total="totalCount"
        :current-page="pageNum"
      >
      </el-pagination>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl">
    </el-dialog>
  </div>
</template>

<script>
  import PageTitle from '@/components/pageTitle/PageTitle.vue'
  // import _ from 'lodash'
  export default {
    name: 'GoodsList',
    components: {
      PageTitle
    },
    activated() {
      this._getList()
    },
    data() {
      return {
        tableData: [],
        pageNum: 1,
        totalCount: 0,
        pageSize: 10,
        status: '0',//  筛选参数
        search: '',//搜索参数
        dialogImageUrl: '',
        dialogVisible: false
      }
    },
    methods: {
      async _getList() {
        let { data: { data, code } } = await this.$axios({
          url: this.$api + '/v1/goods/list',
          method: 'GET',
          params: {
            size: this.pageSize,
            current: this.pageNum,
            state: this.status,
            title: this.search
          }
        })
        if(code == 0) {
          this.tableData = data.items
          this.totalCount = data.page.totalCount
        }
      },
      del(id) {
        this.$confirm('确认删除吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this._del(id)
        })
      },
      async _del(id) {
        let { data: { code, data } } = await this.$axios({
          url: this.$api + '/v1/goods/strike',
          method: 'POST',
          data: {
            id
          }
        })
        if (code == 0) {
          this.$message.success(data)
          this._getList()
        }
      },
      changeState(id, state) {
        this.$confirm('确认变更状态吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this._changeState(id, state)
        })
      },
      async _changeState (id, state) {
        let { data: { data, code } } = await this.$axios({
          url: this.$api + '/v1/goods/up',
          method: 'POST',
          data: {
            id,
            state 
          }
        })
        if(code === 0) {
          this.$message.success(data)
          this._getList()
        }
      },
      handleClick(s) {
        this.status = s
        this.pageNum = 1
        this._getList()
      },
      // handleSearch() {
      //   this.pageNum = 1
      //   this._getList()
      // },
      pageChange(pageNum) {
        this.pageNum = pageNum
        this._getList()
      },
      handlePictureCardPreview(src) {
        this.dialogImageUrl = src
        this.dialogVisible = true
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/select-bar.scss';
  .list-img, video {
     width:80%;
     height:60px;
     cursor: pointer;
  }
  .el-button--text {
    text-decoration: none;
  }
/deep/.el-button el-button--text{
	margin-left: 1000px;
}

</style>